<template>
    <div class="wrapper-search">
        <van-icon name="arrow-left"  class="out" @click="out"/>
        <van-search v-model="value" placeholder="请输入搜索关键词" @blur="search"/>

        <ul class="list">
          <li v-for="(item,index) in list" ::key="index">
            <p class="title">{{item.title}}</p>
            <p class="time">{{new Date(item.start_play_date).toLocaleString()}} | 共{{item.sales_num}}课时</p>
            <div class="content">
              <img :src="item.teachers_list[0].teacher_avatar"/>
              <p class="contp">{{item.teachers_list[0].teacher_name}}</p>
            </div>
            <p class="bottom">
              <span class="span1">123</span>
              <span class="span2">123</span>
            </p>
          </li>
        </ul>
        <p class="record">搜索记录
            <van-icon name="delete-o" class="dels"/>
        </p>
        <ul class="recordList">
            <li v-for="(item,index) in record" :key="index" @click="backfill(item)">{{item}}</li>
           
        </ul>
    </div>
</template>

<script>
import { courseBasis } from "../request/http.js";
import {mapState,mapMutations} from 'vuex'
export default { 
  data() {
    return {
      value: "",
      list: []
    };
  },
  mounted() {},
  methods: {
      ...mapMutations(['add','del']),
    out() {
      this.$router.go(-1);
    },
    search() {
      if (this.value == "") {
        this.list = [];
      } else {
        courseBasis({ keywords: this.value }).then(res => {
          console.log(res);
          this.list = res.data.data.list;
        });
        
        this.add(this.value)
        this.value=''
      }
    },
    dels(){
        this.del()
    },
    backfill(val){
        this.value=val;
        courseBasis({ keywords: this.value }).then(res => {
          console.log(res);
          this.list = res.data.data.list;
        });
        this.value=''

    }
  },
  computed:{
      ...mapState(['record'])
  }
};
</script>

<style lang="scss" scoped>
.wrapper-search {
  width: 100%;
  height: 100vh;
  .out {
    position: absolute;
    top: 0.5rem;
    left: 0;
    font-size: 0.4rem;
  }
  .list {
    width: 100%;
    box-sizing: border-box;
    padding: 0.3rem;
    li {
      width: 100%;
      height: 5rem;
      background: #fff;
      border-radius: 0.5rem;
      margin-top: 0.5rem;
      box-sizing: border-box;
      padding: 0.4rem;

      .title {
        font-size: 0.4rem;
      }
      .time {
        font-size: 0.3rem;
        margin-top: 0.2rem;
      }
      .content {
        margin-top: 0.3rem;
        line-height: 1.5rem;
        img {
          width: 1.5rem;
          height: 1.5rem;
          float: left;
          border-radius: 50%;
        }
        .contp {
          font-size: 0.4rem;
          float: left;
        }
      }
      .bottom {
        width: 100%;
        margin-top: 2.5rem;
        font-size: 0.37rem;
        span {
          display: inline-block;
        }
        .span2 {
          float: right;
          color: green;
        }
      }
    }
  }
  .del{
      float: right;
      font-size: .5rem;
  }
  .recordList{
      list-style: none;
      li{
          float: left;
          padding: .2rem;
          background: #fff;
          border-radius: .1rem;
          margin: .1rem;
      }
  }
}
</style>
